<template>
    <div class="leftbottom">
        <div class="spe">热门文章</div>
        <div v-for="(item,i) in artical" :key=i class="artical">
            <div class="artical-content">{{item.content}}</div>
            <div class="font">
                <i class="iconfont icon-chakan"></i>
                {{item.count}}
            </div>
        </div>
    </div>
</template>

<script>

export default {
    props: {
        artical: [],
    },
}
</script>

<style scoped>
.leftbottom {
    background: #fff;
    margin-top: 30px;
    box-sizing: border-box;
}

.spe {
    text-align: left;
    padding-left: 30px;
    font-size: 20px;
    font-weight: 700;
    line-height: 45px;
    background-image: linear-gradient(to right, rgb(202, 233, 255), rgb(199, 216, 255));
}

.artical {
    text-align: left;
    margin-left: 30px;
    display: flex;
    margin-top: 15px;
    justify-content: space-between;
    padding-right: 15px;
    align-items: center;
}

.artical-content {
    width: 70%;
    cursor: pointer;
    white-space: nowrap;
    /*强制文字在一行文本框内*/
    overflow: hidden;
    /*溢出部分文字隐藏*/
    text-overflow: ellipsis;
    /*溢出部分省略号处理*/
}

.font {
    color: rgb(165, 166, 180);
}
</style>